<template>
    <div class="on">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-top: 10px;">
        <el-select v-model="value" filterable placeholder="根据公司类型选择" @change="searchCompanyByPositionType" clearable>
            <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.typeName"
                    :value="item.id"
            >
            </el-option>
        </el-select>
        <el-input class="keyword"
                  placeholder="请输入公司相关内容"
                  v-model="input"
                  clearable>
        </el-input>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 5px;" @click="searchKeyword">搜索</el-button>
    </div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width:1200px"
                >
            <!--        <el-table-column-->
            <!--                type="selection"-->
            <!--                width="55">-->
            <!--        </el-table-column>-->
            <el-table-column
                    label="序号"
                    width="50"
                    type="index">
            </el-table-column>
            <el-table-column
                    label="头像"
                    width="120" >
                <template scope="scope">
                    <img :src="'http://localhost:8080/static/uploadImages/'+scope.row.face" style="border-radius: 8px;width: 50px;height:50px;"/>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="Email"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="联系方式"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="position"
                    label="公司职位"
                    show-overflow-tooltip
                    >
            </el-table-column>
            <el-table-column
                    prop="company.name"
                    label="所在公司"
                    show-overflow-tooltip
                    >
            </el-table-column>
            <el-table-column
                    prop="company.positionType.typeName"
                    label="公司类别"
                    show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="50">
                <template slot-scope="scope">
                    <!--                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
                    <!--                    <el-button type="text" size="small">编辑</el-button>-->
                    <!--                <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="getUserOtherMessages(scope.row.id)"></el-button>-->
                    <el-button type="danger" icon="el-icon-close" circle size="mini" @click="dialogOn(scope.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="确认操作"
                :visible.sync="dialogVisible"
                width="30%"
                >
            <span><i class="el-icon-warning" style="color:dodgerblue;width: 20px;font-size: 20px;"></i>&nbsp;&nbsp;您确定要封禁该招聘者吗？</span>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateRecruiterEnable">确 定</el-button>
                </span>
        </el-dialog>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                @current-change="handlePageChange"
        >
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "hrMessageList",
        data(){
            return{
                tableData:[],
                input:'',
                pageNum:1,
                value:'',
                pageInfo:{},
                positionTypeId: '',
                options: [],
                //对话框
                dialogVisible: false,
                updateRecruiterId:0
            }
        },
        created() {
            this.getAllHrMessage();
            this.getAllPositionType();
        },
        methods:{
            //获得所有的HR信息
            getAllHrMessage(){
                this.$axios.get("/manage/getAllHrMessage",{params:{pageNum: this.pageNum,keyword:this.input,positionTypeId:this.value}}).then(response=>{
                    console.log(response.data);
                    this.pageInfo = response.data.data;
                    this.tableData = this.pageInfo.list;
                })
            },
            //改变页码
            handlePageChange(pageNum){
                this.pageNum = pageNum;
                this.getAllHrMessage();
            },
            //获取所有的公司分类
            getAllPositionType() {
                this.$axios.get("/manage/getAllPositionType").then(response=>{
                    console.log(response.data.data);
                    this.options = response.data.data;
                })
            },
            //根据公司类别查询
            searchCompanyByPositionType(value){
                this.value = value;
                this.getAllHrMessage();
            },
            searchKeyword(){
                this.getAllHrMessage();
            },
            //弹出对话框
            dialogOn(id){
                this.dialogVisible=true;
                this.updateRecruiterId = id;
            },
            //封禁用户
            updateRecruiterEnable(){
                this.$axios.get("/manage/updateRecruiterEnableById",{params:{recruiterId: this.updateRecruiterId}}).then(response=>{
                    this.dialogVisible=false;
                    console.log(response);
                    this.getAllHrMessage();
                    this.$message({
                        message: response.data.msg,
                        type: 'success'
                    });
                })
            }
        }
    }
</script>

<style scoped>
    .on{
        margin-top: 30px;
        margin-left: 30px;
        width: 100%;
    }
    .keyword{
        margin-top: 10px;
        margin-left: 684px;
        width: 200px;
    }
</style>